<template>
	<view>
		<view class="padding">
			<view class="cu-form-group">
				<view class="title">头像</view>
				<view class="content">
					<button class="cu-btn" open-type="chooseAvatar" @chooseavatar="avatarUrlClick"
						style="background-color: transparent;width: auto;height: auto;padding-left: unset;padding-right: unset;">
						<image :src="curData.headImg" class="solids round" style="height: 100rpx;width: 100rpx;">
						</image>
					</button>
				</view>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">手机号</view>
				<view class="content" :class="curData.phone == ''?'novalue':''">
					<button class="cu-btn" open-type="getPhoneNumber" @getphonenumber="phoneClick"
						style="background-color: transparent;width: auto;height: auto;padding-left: unset;padding-right: unset;">
						<view class="text-black" style="font-size: 32rpx;">
							{{curData.phone == ''?'更换手机号':curData.phone}}
						</view>
					</button>
				</view>
			</view> -->
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<view class="content" :class="curData.nickName == ''?'novalue':''"
					@click="nicknameClick('nickName','昵称',10)">
					{{curData.nickName == ''?'设置昵称':curData.nickName}}
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<picker @change="pickerChange($event,'sex')" :range="sexList" range-key="name">
					<view class="picker" :class="curData.sexShow == ''?'novalue':''">
						{{curData.sexShow == ""?'设置性别':curData.sexShow}}
					</view>
				</picker>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">生日</view>
				<picker mode="date" @change="pickerChange($event,'birthday')" :value="curData.birthday">
					<view class="picker" :class="curData.birthday == ''?'novalue':''">
						{{curData.birthday == ""?'设置生日':curData.birthday}}
					</view>
				</picker>
			</view> -->
		</view>
		<yw-modal ref="ywModalRef" type="nickname"></yw-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curData: {
					headImg: "",
					// phone: "",
					// email: "",
					nickName: "",
					sex: 1,
					// sexShow: "",
					// birthday: "",
				},
				sexList: [{
						name: "男",
						value: "NAN"
					},
					{
						name: "女",
						value: 'NV'
					}
				]
			};
		},
		onLoad() {
			uni.$api.userFindUserInfo().then(result => {
				uni.setStorageSync("userInfo", result)
				let userInfo = result
				this.curData.headImg = userInfo.headImg
				// this.curData.phone = userInfo.phone
				this.curData.nickName = userInfo.nickName
				this.curData.sex = userInfo.sex
				this.curData.sexShow = userInfo.sexShow
				// this.curData.birthday = userInfo.birthday
			})
			// uni.navigateBack({
			// 	delta:1
			// })
		},
		methods: {
			btnClick() {
				this.curData.imgs = ""
			},
			phoneYwModalClose() {
				this.$refs.ywModalRefPhone.close()
				uni.$common.toastSuccess("已修改")

				let userInfo = uni.getStorageSync("userInfo")
				this.curData.phone = userInfo.phone
			},
			pickerChange(e, type) {
				console.info(e, type)
				let value = e.detail.value
				if (type == 'sex') {
					let item = this.sexList[value]
					uni.$user.updateInfo('sex', item.value, () => {
						this.curData.sex = item.value
						this.curData.sexShow = item.name
						this.meUpdata()
					})
				} else if (type == 'birthday') {
					uni.$user.updateInfo('birthday', value, () => {
						this.curData.birthday = value
						this.meUpdata()
					})
				}
			},
			nicknameClick() {
				this.$refs.ywModalRef.open({
					type: "nickname"
				}, (nickName) => {
					this.curData.nickName = nickName
					this.meUpdata()
				})
			},
			inputClick(field, name, numCount) {
				uni.showModal({
					title: "输入框",
					editable: true,
					placeholderText: '请输入' + name,
					success: (res) => {
						console.info("showModal", res)
						if (res.confirm) {
							let content = res.content.trim()
							if (uni.$common.isBlank(content)) {
								return
							}
							if (content.length > numCount) {
								uni.$common.toastError("不能超过" + numCount + "个字")
							}
							if (field == 'email') {
								if (uni.$common.checkStr('email', content)) {
									uni.$user.updateInfo(field, content, () => {
										this.curData[field] = content
										this.meUpdata()
									})
								} else {
									uni.$common.toastError("邮箱不正确")
								}
							} else {
								uni.$user.updateInfo(field, content, () => {
									this.curData[field] = content
									this.meUpdata()
								})
							}
						}
					}
				})
			},
			avatarUrlClick(res) {
				console.info(res)
				uni.$api.upFile({
					file:res.detail.avatarUrl,
					rootPath:"headimg"
				}).then(data => {
					uni.$user.updateInfo("headImg", data.url, () => {
						this.curData.headImg = data.url
						this.meUpdata()
					})
				})
			},
			phoneClick(res) {
				console.info(res)
				if (res.type == 'getphonenumber') {
					if (res.detail.hasOwnProperty("code")) {
						uni.$user.updatePhone(res.detail.code).then(phone => {
							this.curData.phone = phone
							this.meUpdata()
						})
					}
				}
			},
			meUpdata(){
				uni.$emit("meupdate")
			}
		}
	}
</script>

<style>
	.cu-form-group {
		font-size: 30rpx;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 35rpx;
	}

	.cu-form-group picker .picker {
		font-size: 32rpx;
	}

	.cu-form-group {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.cu-form-group .content {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.cu-form-group .content::after {
		font-family: cuIcon;
		content: "\e6a3";
		font-size: 34upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: center;
		margin-right: -20upx;
	}
</style>
